<!--
 * @Author: '一旬' '5312789+ten_days@user.noreply.gitee.com'
 * @Date: 2024-02-26 20:40:21
 * @LastEditors: '一旬' '5312789+ten_days@user.noreply.gitee.com'
 * @LastEditTime: 2024-02-27 20:52:46
 * @FilePath: \go firef:\学习\vue3\vigo-ui\examples\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="page">
    <div class="tab">
        <div class="tab-item" v-for="(item,index) in comList" :key="index" @click="setCom(index)">{{ item }}</div>
    </div>
    <component :is="view">

    </component>
</div>
</template>
<script>
import vgButton from "./demo_button.vue"
import vgDialog from "./demo_dialog.vue";
import vgIcon from "./demo_icon.vue"
import vgRadio from "./demo_radio.vue"
import vgDrawer from "./demo_drawer.vue"
import { defineComponent, reactive,ref} from 'vue';
export default defineComponent({
    components:{vgButton,vgDialog,vgIcon,vgRadio,vgDrawer},
    setup(){
        console.log(vgDialog,"vgDialog");
        const comList = ['vgButton','vgDialog','vgIcon','vgRadio','vgDrawer']
        const viewIndex = ref(0)
        const view = ref(comList[viewIndex.value])
        
        function setCom(index){
            if (index<comList.length){
                viewIndex.value = index
                view.value = comList[viewIndex.value]
            }

                
        }
        return {
            view,
            comList,
            setCom
        }
    },
})
</script>
<style lang="scss">
.line{
    margin-bottom: 32px;
    button{
        margin-right: 8px;
    }
}

.tab{
    display: flex;
    margin-bottom: 24px;
    .tab-item{
        border: 1px solid #666;
        cursor: pointer;
        display: inline-block;
        padding: 8px 12px;
        text-align: center;
        &:nth-child(n+2){
            margin-left: 12px;
        }
    }
}
</style>